<template>
    <div class="discover">
        <div class="moduleHead">
            Discover
        </div>
        <div>
            Discover
        </div>
        <NavBottom></NavBottom>
    </div>
</template>
<script>
import NavBottom from './NavBottom'

export default {
    name: 'discover',

    components: {
        NavBottom
    },

    data: function() {
        return {}
    },

    computed: {},

    methods: {},
}
</script>
<style scoped>
.Discover {
    width: 100%;
    padding: 93px 0 51px 0;
}

.Discover .loading {
    background: url(../assets/max_loading.gif) center no-repeat;
    background-size: 30px auto;
    height: 60px;
}

.Discover .userlist li {
    width: 100%;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px dotted #d9d9d9;
}

.Discover .userlist li:last-child {
    border-bottom: 0;
}

.Discover .userlist .avatar {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    overflow: hidden;
    left: 15px;
    top: 15px;
    background: url(../assets/default_avatar.png) no-repeat;
    background-size: 70px 70px;
}

.Discover .userlist .avatar .bbg {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background: url(../assets/userlist_bbg.png) bottom center no-repeat;
}

.Discover .userlist .avatar .photoNum {
    height: 15px;
    line-height: 17px;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.Discover .userlist .avatar .photoNum span {
    background: url(../assets/ico_photo.png) 0 1px no-repeat;
    background-size: 13px auto;
    padding: 0 0 0 15px;
}

.Discover .userlist .avatar div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.Discover .userlist .avatar div.male {
    background-image: url(../assets/icon_male.png);
}

.Discover .userlist .avatar div.remale {
    background-image: url(../assets/icon_remale.png);
}

.Discover .userlist .avatar div.married {
    background-image: url(../assets/icon_married.png);
}

.Discover .userlist .avatar div.default {
    background-image: url(../assets/default_avatar.png);
}

.Discover .userlist .info {
    margin: 0 15px 0 105px;
    overflow: hidden;
}

.Discover .userlist .name {
    margin: 13px 0 0 0;
    padding: 0 40px 0 0;
    position: relative;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
}

.Discover .ico_gold {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 17px;
    padding: 2px 0 2px 17px;
    margin-right: 5px;
}

.Discover .userlist .date {
    display: block;
    position: absolute;
    line-height: 28px;
    color: #a3a4a6;
    font-size: 12px;
    right: 0;
    top: 0;
}

.Discover .userlist .text {
    font-size: 13px;
    line-height: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #a3a4a6;
}

.Discover .moduleHead {
    height: 44px;
    color: #fff;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
}

.Discover .menuArea {
    width: 100%;
    height: 48px;
    line-height: 20px;
    background: #fff;
    border-bottom: 1px solid #d8d8d8;
    text-align: center;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 44px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.Discover .menuArea div {
    float: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.Discover .menuArea .num {
    position: absolute;
    left: 18px;
    top: -5px;
    min-width: 10px;
    border-radius: 7px;
    background: #DF4141;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 2px 3px;
    line-height: 10px;
    font-style: normal;
}

.Discover .menuArea div span {
    position: relative;
    display: block;
    margin: auto;
    width: 23px;
    height: 21px;
    margin-top: 6px;
}

.Discover .menuArea div p {
    font-size: 12px;
    color: #b5b5b5;
}

.Discover .menuArea div span.vi {
    background: url(../assets/segment_controller.png) 0 0 no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div.on span.vi {
    background: url(../assets/segment_controller.png) 0 -21px no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div span.wi {
    background: url(../assets/segment_controller.png) -81px 0 no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div.on span.wi {
    background: url(../assets/segment_controller.png) -81px -21px no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div span.fa {
    background: url(../assets/segment_controller.png) -162px 0 no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div.on span.fa {
    background: url(../assets/segment_controller.png) -162px -21px no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div span.my {
    background: url(../assets/segment_controller.png) -243px 0 no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div.on span.my {
    background: url(../assets/segment_controller.png) -243px -21px no-repeat;
    background-size: 263px 42px;
}

.Discover .menuArea div.on p {
    color: #e8b14f;
}

.Discover .tabArea {
    overflow: hidden;
}

.Discover .tabBox {
    display: none;
}

.Discover .tabBoxActive {
    display: block;
}
</style>
